<div class="container-fluid">
  <app-page-title title="Search Results" [breadcrumbItems]="breadCrumbItems"></app-page-title>

  <div class="row mt-3">
    <div class="col-lg-12">
      <!-- Load Spinner -->
      <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
        <p class="loading">Loading, Please Wait...</p>
      </ngx-spinner>

      <div class="search-leftbar card shadow-sm">

        <h6 class="mt-1">Category</h6>
        <div class="search-list">
          <a role="button" (click)="getCheck()"><i class="mdi mdi-text-box-check mr-2"></i> Checklists</a>
          <a role="button" (click)="getKB()"><i class="mdi mdi-school mr-2"></i>Knowledgebase</a>
          <a role="button" (click)="getLab()"><i class="mdi mdi-flask mr-2"></i>Labs</a>
          <a role="button" (click)="getProj()"><i class="mdi mdi-card-bulleted mr-2"></i>Projects</a>
        </div>
      </div>

      <div class="search-rightbar mb-3">
        <div class="card border shadow-sm">
          <div class="card-body">
      
            <div class="row mb-3">
              <div class="col-lg-12">
                <div class="card shadow-none">
                  <div class="card-header">
                    <h5 *ngIf="check_status === true" class="mb-0">Checklists Results</h5>
                    <h5 *ngIf="kb_status === true" class="mb-0">Knowledgebase Results</h5>
                    <h5 *ngIf="lab_status === true" class="mb-0">Labs Results</h5>
                    <h5 *ngIf="pro_status === true" class="mb-0">Projects Results</h5>
                  </div>
                  <div *ngIf="check_status === true">
                    <div *ngFor="let item of results_checklist; let i = index"
                      class="col-xl-12 mt-3 d-flex card border shadow-none">
                      <div class="card-body pb-2">
                        <div class="media">
                          <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-15">
                              <a *ngIf="check_status === true"
                                [routerLink]="['/checklists/read/', item.checklist_items_type]"
                                class="text">{{item.checklist_items_checklist_id}} {{item.checklist_items_content}}</a>
                            </h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="lab_status === true">
                    <div *ngFor="let item of results_labs; let i = index"
                      class="col-xl-12 mt-3 d-flex card border shadow-none">
                      <div class="card-body pb-2">
                        <div class="media">
                          <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-15">
                              <a *ngIf="lab_status === true" [routerLink]="['/labs/view/']" class="text">{{item.title}}
                                {{item.content}}</a>
                            </h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="kb_status === true">
                  <div class="dropdown-divider"></div>
                  <!-- Content Body -->
                  <div class="row mb-4" *ngFor="let item of results_kb; let i = index">
                    <div class="col">
                      <div class="box media mb-2">
                        <div class="icon mr-3">
                          <i class="bx bx-book-content font-size-20 text-success"></i>
                        </div>
                        <div class="media-body">
                          <div class="row">
                            <div class="col-sm-8">
                              <h4 class="card-title text-primary">{{item.title}}</h4>
                            </div>
                            <div class="col-sm-4">
                              <div class="text-right">
                                <a href="javascript:void(0)" data-toggle="collapse"
                                  (click)="isCollapsed[i] = !isCollapsed[i]">Read More</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="collapse" id="first" [ngbCollapse]="!isCollapsed[i]">
                        <div class="card shadow-none border card-body mb-0">
                          <pre style="overflow-x: auto;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;">{{item.content}}</pre>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Content Body Ends-->
                  <div *ngIf="pro_status === true">
                    <div *ngFor="let item of results_projects; let i = index"
                      class="col-xl-12 mt-3 d-flex card border shadow-none">
                      <div class="card-body pb-2">
                        <div class="media">
                          <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-15">
                              <a *ngIf="pro_status === true" [routerLink]="['/projects/view/', item.project_id]"
                                class="text">{{item.name}} {{item.description}}</a> </h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>